<%--
  Created by IntelliJ IDEA.
  User: 25306
  Date: 2025/10/14
  Time: 下午2:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>课程详情</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/iconfont/font_0/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <style>
        html,
        body {
            height: 100%;
        }

        body>.wrap-cc {
            min-height: 100%;
        }

        .content-cc {
            /* padding-bottom 等于 footer 的高度 */
            padding-bottom: 80px;
        }

        .footer-cc {
            width: 100%;
            height: 80px;
            /* margin-top 为 footer 高度的负值 */
            margin-top: -80px;
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function() {


            $(".title-ul>li").on('click', function() {
                console.log($(this));
                $(this).addClass('current').siblings().removeClass("current");
            })

            $('.addPraise').bind('click', function(){
                $.ajax({
                    type: 'post',
                    url: '${pageContext.request.contextPath}/comment/addLike',
                    data: {"commentId": $(this).attr("data-id")},
                    dataType: "json",
                    success: function(result) {
                        if (result.responseCode == "2001") {
                            alert(result.message);
                            location.href = "${pageContext.request.contextPath}/course/findVideo?pageNo=${commentPage.pageNum == 0 ? 1 : commentPage.pageNum}&id=${course.chapter.resource.id}";
                        } else {
                            alert(result.message);
                        }
                    }

                });
                // alert('点赞成功');
            });

            $("#coursePageHelper").bootstrapPaginator({
                bootstrapMajorVersion: 3,
                currentPage: "${commentPage.pageNum == 0 ? 1 : commentPage.pageNum}",
                totalPages: "${commentPage.pages == 0 ? 1 : commentPage.pages}",
                size: "normal",
                alignment: "center",
                pageUrl: function (type, page, current) {
                    return "${pageContext.request.contextPath}/course/findVideo?pageNo=" + page+"&id=${course.chapter.resource.id}";
                }
            })

            $('#submitComment').click(function() {
                $.ajax({
                    type: 'post',
                    url: '${pageContext.request.contextPath}/comment/addComment',
                    data: {"context": $("#commentText").val(),
                        "resourceId":$(this).attr("data-id")
                    },
                    dataType: "json",
                    success: function(result) {
                         // 清空textarea内容
                        if (result.responseCode == "2001") {
                            alert("发布成功，等待审核");
                            $('#commentText').val('');
                            location.href = "${pageContext.request.contextPath}/course/findVideo?pageNo=${commentPage.pageNum == 0 ? 1 : commentPage.pageNum}&id=${course.chapter.resource.id}";
                        } else {
                            alert(result.message);
                        }
                    }

                });
            });

            $("#userSetForm").on("submit", function(e) {
                e.preventDefault();
                let formData = new FormData($("#userSetForm")[0]);
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/user/UserInformationUpdate",
                    data: formData,
                    dataType: "json",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            alert("更新成功！");
                            window.location.href = "${pageContext.request.contextPath}/showIndex";
                        } else {
                            alert(result.message);
                        }
                    }
                });
                return false;
            });

        })
    </script>
</head>

<body>
<div class="wrap-cc">
    <div class="content-cc">
        <nav class="navbar navbar-default">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="${pageContext.request.contextPath}/course/findByIdAll?id=${course.id}" class="vertical-middle"><i class="glyphicon glyphicon-menu-left"></i></a></li>
                    <li class="vertical-middle text-color"> ${course.courseName} </li>
                    <li class="vertical-middle little-title">${course.chapter.title}</li>
                    <li class="vertical-middle little-title">${course.chapter.resource.title}</li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                            <img class="img-circle" src="${pageContext.request.contextPath}/images/user.png" id="userImg">
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu userinfo cc">
                            <li>
                                <img src="${pageContext.request.contextPath}/images/user.png" class="img-circle" alt="">
                                <div class="">
                                    <p>我叫${user.nickname}</p>
                                    <p>金币<span>${user.allGold}</span>&nbsp;积分 <span>${user.allPoint}</span></p>
                                </div>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/userResource/findAll">
                                    <i class="glyphicon glyphicon-edit"></i>我的课程
                                </a>
                                <a href="${pageContext.request.contextPath}/goldPoints/findAll">
                                    <i class="glyphicon glyphicon-record"></i>积分记录
                                </a>
                            </li>
                            <li>
                                <a href="#" data-toggle="modal" data-target="#userSet">
                                    <i class="glyphicon glyphicon-cog"></i>个人设置
                                </a>
                                <a href="${pageContext.request.contextPath}/showIndex"><i class="glyphicon glyphicon-off"></i>退出登录</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="container-fluid padding-0 bgColor">
            <video style="width: 100%; height:470px;" controls="controls">
                <source src="${pageContext.request.contextPath}${course.chapter.resource.path}">
            </video>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <ul class="title-ul">
                        <li class="current">评论</li>
                        <li>问答</li>
                        <li>笔记</li>
                    </ul>
                    <div class="row comment-area">
                        <div class="col-md-1"><img src="${pageContext.request.contextPath}/images/33.jpg" alt="" class="img-circle " width="35" height="35"></div>
                        <div class="col-md-9">
                            <textarea id="commentText" cols="70" rows="10" style="resize:none;"></textarea>
                        </div>
                        <div class="col-md-2 col-md-offset-10 ">
                            <button id="submitComment" class="btn btn-success" data-id="${course.chapter.resource.id}" data-type="${course.chapter.resource.fileType}">发表评论</button>
                        </div>
                    </div>
                    <ul id="commentDetail" class="margin-bottom-90">
                        <c:forEach items="${commentPage.list}" var="comment">
                            <li>
                                <div class="row comment-area">
                                    <div class="col-md-1"><img src="${pageContext.request.contextPath}/images/33.jpg" alt="" class="img-circle " width="35" height="35"></div>
                                    <div class="col-md-10 comment-info">
                                        <div class="col-md-12">${comment.user.nickname}</div>
                                        <div class="col-md-12">${comment.context}</div>
                                        <div class="col-md-12">
                                            <div>
                                                时间：<span>${comment.createDate}</span>
                                            </div>
                                            <div>
                                                <span>举报</span>
                                                <span class="addPraise" data-id="${comment.id}" ><i class="icon iconfont icon-zan"></i>${comment.like}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                        <li>

                        </li>
                    </ul>
                    <div style="text-align: center;" >
                        <ul id="coursePageHelper" ></ul>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row teacher-msg">
                        <div class="col-md-12 course-title padding-30">推荐课程</div>
                    </div>
                    <c:forEach items="${courses}" var="course">
                        <div class="row recommd-course">
                            <div class="col-md-4">
                                <img src="${pageContext.request.contextPath}${course.coverImageUrl}" alt="">
                            </div>
                            <div class="col-md-8">
                                <div><a href="${pageContext.request.contextPath}/course/findByIdAll?id=${course.id}">${course.courseName}</a></div>
                                <div>${course.courseInfo}</div>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer-cc">
    <div class="footer">
        <div>
            版权所有： 南京网博
        </div>
        <div>
            Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2
        </div>
    </div>
</div>
<div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">个人信息</h4>
            </div>
            <form action="#" class="form-horizontal" method="post" id="userSetForm">

                <input type="hidden" name="id" value="${user.id}" />

                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">旧密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="oldPassword" />
                        </div>
                    </div>
                    <!-- 修改为正确的新密码字段 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">新密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="newPassword" />
                        </div>
                    </div>
                    <!-- 保留一个确认密码字段 -->
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="confirmPassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="nickname" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">邮箱：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="email" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                    <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                    <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

</html>
